
<template>
<!-- 写手端 菜单栏 -->
  <div class="meunBar">

      <div class="title">
        <img src="@/assets/img/writer/title.png" alt="">
      </div>

      <div class="arr">
        <div class="arrItem" v-for="(item,index) in state.meunBarArr" @click="goPage(item,index)" :key="index">
            <div :class="state.activeIndex==index ? 'activeItem' : 'item'" >
                <div class="icon">
                    <img :src="state.activeIndex==index ? item.activeIcon : item.icon" alt="">
                    <!-- <img src="./src/assets/img/writer/cover.png" alt=""> -->
                </div>
                <div class="text">{{item.title}}</div>
            </div>

        </div>
      </div>

  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const state = reactive({
      meunBarArr : [],
      activeIndex: -1,
  });
export default {
  name: 'menuBar',
  components: {},
  setup(props,{emit}) {
      const ctx = getCurrentInstance();
      const _this = ctx.appContext.config.globalProperties
      const router = useRouter();
      const store = useStore();
      function getMenuBar(){
          state.meunBarArr = []
          let routerArr = router.options.routes[2].children
          routerArr.forEach((item)=>{
            if (item.meta.role===1 && item.meta.isMenu) {
              let itemObj ={
                title : item.meta.title,
                icon : item.meta.icon,
                activeIcon : item.meta.activeIcon,
                name : item.name
               }
               state.meunBarArr.push(itemObj)
            }
          })
          console.log(state.meunBarArr);

            let title = router.currentRoute._value.meta.title
             state.meunBarArr.forEach((item,index)=>{
               if(item.title==title){
                 state.activeIndex = index
               }
             })

          // console.log(state.meunBarArr);
      }
      function goPage(_item,_index){
        state.activeIndex = _index
        router.push({name:`${_item.name}`})
      };
      onMounted(getMenuBar);
      return{
        state,
        getMenuBar,
        goPage
      }
  },
  props: {},
  watch: {},
  methods: {},
  computed: {},
  mounted () {
  }
}
</script>
<style lang="scss" scoped>

@media screen and (max-width: 1000px){
  .meunBar{
    width: 0 !important;
    display: none;
    transition: all 1s;
    .item{
      opacity: 0;
    }
  }
  
}

.meunBar{
  width: 255px;
  height: 100vh;
  transition: all 1s;
  display: block;

  background: #fff;
    .title {
      background: #F0F4FF;
      height: 89px;
      display: grid;
      place-items: center;
      img {
        width: 85%;
      }
    }

    .arr {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
        .arrItem {
          height: 100px;
          display: flex;
          place-items: center;
          align-items: center;
          width: 75%;
          color: #595959;
          cursor: pointer;
              .activeItem{
                display: flex;
                height: 58.7px;
                width: 100%;
                background-color: #ECF1FF ;
                color:#4977FC ;
                display: flex;
                align-items: center;
                position: relative;
                &::before{
                  content: '';
                  position: absolute;
                  left: -16%;
                  border-radius: 50%;
                  background-color: #ECF1FF ;
                  height: 58.7px;
                  width: 58.7px;
                }
              }
           .item{
             display: flex;
             align-items: center;
           }


          .icon {

            img{
                position: relative;
                left: -10%;
                width: 50px;
                height: 50px;
            }
          }

          .text {

          }
        }

    }

}
</style>
